<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="嗨购登录"
        left-arrow
        @click-left="$router.back()"
      ></van-nav-bar>
    </header>
    <div class="content">
      <div class="form" v-if="type === '1'">
        <van-field v-model="loginname" placeholder="用户名/手机号/邮箱" clearable/>
        <van-field v-model="password" type="password" placeholder="请输入密码" clearable/>
        <p class="passwordTip" v-if="passwordTipFlag">输入至少6位，包含至少一个大写字母，1个小写字母，1个数字</p>
        <div class="my-button">
          <van-button color="#ff6666" :disabled="adminameFlag"  block round @click="adminameLoginFn">登录</van-button>
        </div>
      </div>
      <div class="form" v-if="type === '0'">
        <van-field v-model="tel" type="tel" placeholder="手机号码" clearable/>
        <van-field
          v-model="telcode"
          center
          clearable
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" >发送短信验证码</van-button>
          </template>
        </van-field>
        <div class="my-button">
          <van-button color="#ff6666"  block round>登录</van-button>
        </div>
      </div>
      <!-- 登录方式以及 注册提示 -->
      <ul class="more">
        <li @click="changeType">
          <span v-if="type === '1'">短信验证码登录</span>
          <span v-else>账号密码登录</span>
        </li>
        <router-link to="/register/step1" tag="li">
          手机快速注册
        </router-link>
      </ul>
      <div class="my-divider">
        <van-divider>其他登录方式</van-divider>
      </div>
      <div class="my-login-type">
        <van-row type="flex" justify="center">
          <van-col span="6">
            <van-image :src="qq" width="48" height="48"/>
            <p>QQ</p>
          </van-col>
          <van-col span="6">
            <van-image :src="wx" width="48" height="48"/>
            <p>微信</p>
          </van-col>
          <van-col span="6">
            <van-image :src="apple" width="48" height="48"/>
            <p>苹果</p>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Field, Button, Divider, Col, Row, Image as VanImage, Dialog, Toast } from 'vant'
import { login } from './../../api/user'
Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Divider)
Vue.use(Col)
Vue.use(Row)
Vue.use(VanImage)
Vue.use(Dialog)
Vue.use(Toast)
export default {
  data () {
    return {
      qq: '',
      wx: '',
      apple: '',
      tel: '',
      password: '',
      loginname: '',
      telcode: '',
      type: '1' // 1表示账户名密码 0表示手机验证码
    }
  },
  computed: {
    adminameFlag () {
      if (this.loginname !== '' && /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password)) {
        return false
      } else {
        return true
      }
    },
    passwordTipFlag () {
      if (this.password === '' || /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password)) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    changeType () {
      this.type = this.type === '1' ? '0' : '1'
    },
    adminameLoginFn () {
      console.log('1111111')
      login({
        loginname: this.loginname,
        password: this.password
      }).then(res => {
        if (res.data.code === '10010') {
          // 账户不存在，提醒用户是否要立即注册
          Dialog.confirm({
            message: '该用户还未注册，是否立即注册',
            confirmButtonText: '立即注册',
            confirmButtonColor: '#ff6666',
            cancelButtonText: '取消',
            cancelButtonColor: '#999'
          })
            .then(() => {
              this.$router.push('/register')
            })
            .catch(() => {
              // on cancel
            })
        } else if (res.data.code === '10011') {
          // 提醒用户密码错误， 视情况而定是否需要清空密码输入框 this.password = ''
          Toast('密码错误')
        } else {
          // 登录成功
          Toast('登录成功')
          localStorage.setItem('userid', res.data.data.userid) // 知道是谁
          localStorage.setItem('token', res.data.data.token) // 后端验证用户的登录状态
          localStorage.setItem('loginState', true) // 前端自检登录状态
          // 返回上一页
          this.$router.back()
        }
      })
    }
  }
}
</script>

<style lang="stylus">
.container .box .content
  padding 30px 15px
  background-color #ffffff

.form
  .my-button
    margin-top 30px
.more
  margin-top 20px
  display flex
  li
    flex 1
    &:nth-child(1)
      text-align left
    &:nth-child(2)
      text-align right
.my-divider
  margin-top 80px
.passwordTip
  color #f66
  font-size 12px
</style>
